<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="图片" name="image" lazy>
      <select-image :value.sync="selectId" @autoChecked="checked" />
    </el-tab-pane>
    <el-tab-pane label="音频" name="audio" lazy>
      <select-audio :value.sync="selectId" @autoChecked="checked" />
    </el-tab-pane>
    <el-tab-pane label="视频" name="video" lazy>
      <select-video :value.sync="selectId" @autoChecked="checked" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import SelectImage from './image';
import SelectVideo from './video';
import SelectAudio from './audio';
export default {
  components: {
    SelectImage,
    SelectAudio,
    SelectVideo
  },
  data() {
    return {
      activeName: 'image',
      selectId: 0
    }
  },
  watch: {
    selectId(attachId) {
      this.$emit('update:attachId', {
        type: this.activeName,
        attachId: attachId
      })
    }
  },
  methods: {
    checked() {
      this.$emit('update:attachId', {
        type: this.activeName,
        attachId: this.selectId
      });
      this.$emit('autoChecked', true);
    }
  }
}
</script>

<style scoped>

</style>
